{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{% block title %}hometown base html{% endblock title %}</title>
    <meta name="description" content="{% block description %}description{% endblock description %}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="">
    <style>
        body {
            position: relative;
        }
    </style>
</head>

<body data-spy="scroll" data-target="#content_dir" data-offset="0">
<div class="container-fluid">
    <div class="row sticky-top">
        <div class="col" style="padding: 0">
            <nav class="navbar navbar-expand-lg navbar-dark bg-success">
                <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
                aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button> -->
                <div class="collapse navbar-collapse">
                    <a class="navbar-brand" href="{% url 'home:index' %}"><img src="{% static 'images/logo.png' %}"
                                                                               alt=""
                                                                               style="max-width: 15%;height:auto;"></a>
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home:home_history' %}">家乡历史</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home:home_star' %}">家乡名人</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home:home_beauty' %}">家乡美景</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home:home_building' %}">家乡建筑</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'home:home_custom' %}">家乡风俗</a>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
                    </form>
                    {% if request.session.is_login %}
                        <div class="btn-group" role="group" aria-label="logged-in">
                            <button type="button" class="btn btn-outline-light my-2 mx-2 my-sm-0" data-toggle="tooltip"
                                    data-placement="bottom" title="欢迎, {{ request.session.user_id }}"
                                    onclick="window.location.href='{% url 'home:user_central' %}'"><i
                                    class="fa fa-user-circle fa-lg" aria-hidden="true"></i></button>
                        </div>
                        <button class="btn btn-outline-light my-2 mx-2 my-sm-0" data-toggle="modal"
                                data-target="#logout">
                            <i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
                        </button>
                    {% else %}
                        <button class="btn btn-outline-light my-2 mx-2 my-sm-0" data-toggle="modal"
                                data-target="#not_login">
                            <i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
                        </button>
                    {% endif %}
                </div>
            </nav>
        </div>
    </div>
    <!-- 提示信息 -->
    {% ifequal message_success "内容提交成功!" %}
        <h5 class="page-header" style="margin-top: 20px"></h5>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>{{ message_success }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endifequal %}
    {% ifequal message_warn "标题相同, 请确认你编辑的内容" %}
        <h5 class="page-header" style="margin-top: 20px"></h5>
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>{{ message_warn }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endifequal %}
    {% ifequal message_delete_item '删除成功!' %}
        <h5 class="page-header" style="margin-top: 20px"></h5>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>{{ message_delete_item }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endifequal %}
    <!-- 登出 -->
    <div class="modal fade" id="logout" tabindex="-100" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logoutLabel">退出登录</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    您确认要退出当前账号吗?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">我再想想</button>
                    <button type="button" class="btn btn-success"
                            onclick="window.location.href='{% url 'home:logout' %}'">
                        退出登录
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- 添加新内容 -->
    <div class="modal fade" id="editor_content" tabindex="-100" role="dialog" aria-labelledby="editor_contentLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-center" id="editor_contentLabel">添加新内容
                                <button type="button" class="close float-right"
                                        data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </h5>
                        </div>
                    </div>
                    <hr class="my-4">
                    <div class="row">
                        <div class="col">
                            <form action="/{% block form_action %}{% endblock %}/" method="POST">
                                {% csrf_token %}
                                <div class="form-group">
                                    {{ content_form.titleItem.label_tag }}
                                    {{ content_form.titleItem }}
                                    <small class="form-text text-muted">
                                        标题字数限制在2~20
                                    </small>
                                </div>
                                <div class="form-group">
                                    {{ content_form.content.label_tag }}
                                    {{ content_form.content }}
                                    <small class="form-text text-muted">
                                        内容字数限制在6~2048
                                    </small>
                                </div>
                                <button type="submit" class="btn btn-success btn-block btn-lg">提交</button>
                            </form>
                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除内容 -->
    <div class="modal fade" id="delete_content_modal" tabindex="-100" role="dialog"
         aria-labelledby="delete_content_modalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-center" id="delete_content_modalLabel">删除内容
                                <button type="button" class="close float-right"
                                        data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </h5>
                        </div>
                    </div>
                    <hr class="my-4">
                    <div class="row">
                        <div class="col">
                            <form action="/{% block form_action_3 %}{% endblock %}/" method="POST">
                                {% csrf_token %}
                                {% if user_content_item %}
                                    {% for foo in user_content_item %}
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox"
                                                   id="Checkbox{{ forloop.counter }}"
                                                   value="{{ foo.item_title }}"
                                                   name="delete_contentCheckbox_{{ foo.item_title }}">
                                            <label class="form-check-label"
                                                   for="Checkbox{{ forloop.counter }}">{{ foo.item_title }}</label>
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    暂无
                                {% endif %}
                                <button type="submit" class="btn btn-success btn-block">删除</button>
                            </form>
                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                </div>
            </div>
        </div>
    </div>
    <!-- 添加讨论 -->
    <div class="modal fade" id="discuss_modal" tabindex="-100" role="dialog" aria-labelledby="discuss_modalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-center" id="discuss_modalLabel">添加新讨论
                                <button type="button" class="close float-right"
                                        data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </h5>
                        </div>
                    </div>
                    <hr class="my-4">
                    <div class="row">
                        <div class="col">
                            <form action="/{% block form_action_2 %}{% endblock %}/" method="POST">
                                {% csrf_token %}
                                <div class="form-group">
                                    {{ discuss_form.discuss_title.label_tag }}
                                    {{ discuss_form.discuss_title }}
                                    <small class="form-text text-muted">
                                        标题字数限制在20内
                                    </small>
                                </div>
                                <div class="form-group">
                                    {{ discuss_form.discuss.label_tag }}
                                    {{ discuss_form.discuss }}
                                    <small class="form-text text-muted">
                                        内容字数限制在2000内
                                    </small>
                                </div>
                                <button type="submit" class="btn btn-success btn-block btn-lg">提交</button>
                            </form>
                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                </div>
            </div>
        </div>
    </div>

    <!-- 历史 -->
    <div class="modal fade" id="history_modal" tabindex="-100" role="dialog" aria-labelledby="history_modalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-center" id="history_modalLabel">查看历史记录
                                <button type="button" class="close float-right"
                                        data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </h5>
                        </div>
                    </div>
                    <hr class="my-4">
                    <div class="row">
                        <div class="col">
                            <ul>
                                {% if info.action_history %}
                                    {% for foo in info.action_history %}
                                        <li><p class="lead">{{ foo.action_starter }}
                                            {{ foo.action_type }} "{{ foo.action_target }}" 于{{ foo.action_date }}</p>
                                        </li>
                                    {% endfor %}
                                {% else %}
                                    <li>暂无</li>
                                {% endif %}
                            </ul>

                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面贡献者 -->
    <div class="modal fade" id="editor_modal" tabindex="-100" role="dialog" aria-labelledby="editor_modalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-center" id="editor_modalLabel">
                                页面贡献者名单
                                <button type="button" class="close float-right"
                                        data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </h5>
                        </div>
                    </div>
                    <hr class="my-4">
                    <p class="lead text-center"><strong>感谢你们的付出!</strong></p>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                    <div class="row">
                        <div class="col">
                            <ul>
                                {% if info.editor_list %}
                                    {% for foo in info.editor_list %}
                                        <li><p class="lead">{{ foo.user_id }}</p></li>
                                    {% endfor %}
                                {% else %}
                                    <li><p class="lead">暂无</p></li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                </div>
            </div>
        </div>
    </div>

    <!-- 未登录 -->
    <div class="modal fade" id="not_login" tabindex="-100" role="dialog" aria-labelledby="not_loginLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="not_loginLabel">您尚未登录账号</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    立即登录/注册?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"
                            onclick="window.location.href='{% url 'home:register' %}'" data-dismiss="modal">注册账号
                    </button>
                    <button type="button" class="btn btn-success"
                            onclick="window.location.href='{% url 'home:index' %}'">
                        前往登录
                    </button>
                </div>
            </div>
        </div>
    </div>
    <h5 class="page-header" style="margin-top: 20px"></h5>
    <div class="row">
        <div class="col-10">
            <div class="card mb-3">
                <div class="card-header">
                    <h2>{% block page_title %}标题{% endblock page_title %}</h2>
                    <div class="btn-group" role="group" aria-label="user function">
                        {% if request.session.is_login %}
                            {#                            <button type="button" class="btn btn-outline-success" data-toggle="modal"#}
                            {#                                    data-target="#editor_content">编辑#}
                            {#                            </button>#}
                            <div class="btn-group" role="group">
                                <button id="btnGroupDrop1" type="button" class="btn btn-outline-success dropdown-toggle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    编辑
                                </button>
                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="padding: 0">
                                    <button type="button" class="btn btn-outline-success btn-block" data-toggle="modal"
                                            data-target="#editor_content">添加
                                    </button>
                                    <button type="button" class="btn btn-outline-success btn-block" data-toggle="modal"
                                            data-target="#editor_content">修改
                                    </button>
                                    <button type="button" class="btn btn-outline-success btn-block" data-toggle="modal"
                                            data-target="#delete_content_modal">删除
                                    </button>
                                </div>
                            </div>
                        {% else %}
                            <button type="button" class="btn btn-outline-success" data-toggle="modal"
                                    data-target="#not_login">编辑
                            </button>
                        {% endif %}
                        <button type="button" class="btn btn-outline-success" data-toggle="modal"
                                data-target="#history_modal">历史
                        </button>
                        {% if request.session.is_login %}
                            <button type="button" class="btn btn-outline-success" data-toggle="modal"
                                    data-target="#discuss_modal">讨论
                            </button>
                        {% else %}
                            <button type="button" class="btn btn-outline-success" data-toggle="modal"
                                    data-target="#not_login">讨论
                            </button>
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    {% block card_content %}
                        <h5 class="card-title">次标题</h5>
                        <p class="card-text">内容</p>
                    {% endblock %}
                </div>
            </div>
        </div>
        <div class="col-2">
            <div class="cow">
                <div class="col">
                    <!--贡献者-->
                    <div class="card mb-3">
                        <div class="card-header bg-transparent">页面贡献者</div>
                        <div class="card-body text-success">
                            <ul class="card-text">
                                {% block page_editor %}
                                    <li>张三</li>
                                    <li>李四</li>
                                {% endblock %}
                            </ul>
                        </div>
                        <div class="card-footer bg-transparent text-right"><a href="#"
                                                                              class="btn btn-success"
                                                                              data-toggle="modal"
                                                                              data-target="#editor_modal">查看更多</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cow sticky-top" style="top: 60px">
                <div class="col">
                    <!--目录-->
                    <div class="card mb-3">
                        <div class="card-header bg-transparent">目录</div>
                        <div class="card-body text-success">
{#                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">#}
{#                                <li class="nav-item">#}
{#                                    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home"#}
{#                                       role="tab" aria-controls="pills-home" aria-selected="true">Home</a>#}
{#                                </li>#}
{#                                <li class="nav-item">#}
{#                                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"#}
{#                                       role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>#}
{#                                </li>#}
{#                            </ul>#}
                            <div class="card-text list-group" id="content_dir" style="overflow: auto;max-height: 300px">
{#                                <div class="tab-pane fade show active" id="pills-home" role="tabpanel"#}
{#                                     aria-labelledby="pills-home-tab">...#}
{#                                </div>#}
{#                                <div class="tab-pane fade" id="pills-profile" role="tabpanel"#}
{#                                     aria-labelledby="pills-profile-tab">...#}
{#                                </div>#}
                                {% if info.content_item %}
                                    {% for foo in info.content_item %}
                                        <a class="list-group-item list-group-item-action"
                                           href="#list-item-{{ forloop.counter }}"
                                        >{{ foo.item_title }}</a>
                                    {% endfor %}
                                {% else %}
                                    暂无内容
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cow">
                <div class="col">
                    <!--最近添加 and 最近讨论-->
                    <div class="card">
                        <div class="card-body" style="padding: 10px">
                            <nav>
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <a class="nav-item nav-link active" id="nav-add-tab" data-toggle="tab"
                                       href="#nav-add" role="tab"
                                       aria-controls="nav-add" aria-selected="true" style="font-size: 0.8rem">最近编辑</a>
                                    <a class="nav-item nav-link" id="nav-discuss-tab" data-toggle="tab"
                                       href="#nav-discuss" role="tab"
                                       aria-controls="nav-discuss" aria-selected="false"
                                       style="font-size: 0.8rem">最近讨论</a>
                                </div>
                            </nav>
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade show active" id="nav-add" role="tabpanel"
                                     aria-labelledby="nav-add-tab">
                                    <ul>
                                        {% if info.latest_history %}
                                            {% for item in info.latest_history %}
                                                <li>{{ item.action_type }}: {{ item.action_target }}</li>
                                            {% endfor %}
                                        {% else %}
                                            <li>暂无</li>
                                        {% endif %}
                                    </ul>
                                </div>
                                <div class="tab-pane fade" id="nav-discuss" role="tabpanel"
                                     aria-labelledby="nav-discuss-tab">
                                    <ul>
                                        {% if info.discuss_list %}
                                            {% for item in info.discuss_list %}
                                                <li>{{ item.discuss_content }}</li>
                                            {% endfor %}
                                        {% else %}
                                            <li>暂无新讨论</li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="https://kit.fontawesome.com/9900f8e783.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/javascript.util/0.12.8/javascript.util.min.js"></script>
    <script src="" async defer></script>
</div>
</body>

</html>